<template>
  <view class="page flex-col">
    <view v-if="list.length > 0">
      <view class="list-items_1 flex-row" v-for="(item, index) in list" :key="index" @click="$to('/pages/chat/index?user_id=' + item.sender.id + '&goodId=' + item.good_id)">
        <image class="label_1" style="border-radius: 50px" mode="aspectFill" :src="item.sender.avatar" />
        <view class="text-group_1 flex-col">
          <view class="text-wrapper_3 flex-row justify-between">
            <text class="text_4">{{ item.sender.nickname }}</text>
            <text class="text_5">{{ item.time }}</text>
          </view>
          <text class="text_6">{{ item.content.body }}</text>
        </view>
      </view>
    </view>
    <view v-if="list.length == 0" class="noneData"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      total: 0
    }
  },
  onLoad(option) {
    this.getData()

    setInterval(() => {
      this.getData()
    }, 25000)
    setInterval(() => {
      this.$http({
        url: 'getMyMessage',
        method: 'post',
        data: {
          page: this.page
        }
      }).then(res => {})
    }, 10000)
  },
  onReachBottom(e) {
    if (this.list.length < this.total) {
      this.page++
      this.getData(true)
    }
  },
  methods: {
    getParamsObj(str) {
      let queryString = str
      let params = queryString.split('&').reduce((acc, current) => {
        let [key, value] = current.split('=')
        acc[key] = value
        return acc
      }, {})
      return params
    },
    getData(type) {
      if (!type) {
        this.list = []
      }
      this.$http({
        url: 'getMyMessage',
        method: 'post',
        data: {
          page: this.page
        }
      }).then(res => {
        this.total = res.data.total
        let arr = res.data.data.map(el => {
          // el.content.body = el.content.body.replace('type=address&address=', '');
          if (el.content.body.includes('type=')) {
            let obj = this.getParamsObj(el.content.body)
            el.content.body = obj.content || obj.username
          }

          return el
        })
        this.list.push(...arr)
      })
    }
  }
}
</script>
<style lang="css">
@import '../common/common.css';
.page {
  background-color: #f8f8f8;
  min-height: 99vh;
  position: relative;
  width: 100%;
  overflow-y: scroll;
}

.box_3 {
  box-sizing: border-box;
}

.list-items_1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  width: 95%;
  margin: 0 auto;
  height: 136rpx;
  margin-top: 20rpx;
  padding: 26rpx 30rpx 26rpx 24rpx;
}

.label_1 {
  width: 80rpx;
  height: 80rpx;
  margin: 2rpx 0 2rpx 0;
}

.text-group_1 {
  margin-left: 20rpx;
}

.text-wrapper_3 {
  width: 556rpx;
}

.text_4 {
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  text-align: left;
  line-height: 40rpx;
}

.text_5 {
  width: 218rpx;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  text-align: right;
  white-space: nowrap;
  line-height: 34rpx;
  margin-top: 4rpx;
}

.text_6 {
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  overflow-wrap: break-word;
  overflow: hidden;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  margin: 10rpx 4rpx 0 0;
}
</style>
